<template>
    <div>
    <div class="container"> 
    <div class="handle-box">
        <el-row class="top-btn">
     		  <el-col :span="12">
                    <el-button color="#1C84C6"  @click="open">添加</el-button> 
                    <el-button color="#e35148" @click="handleAllDelete">删除所有</el-button> 
                  
                </el-col>      
            <el-col  :span="12">
                <el-input class="handle-input"  placeholder="请输入要查询的图书关键字">
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
         </el-col>                       
	    </el-row>
    </div>      
    <el-divider></el-divider>  
    <el-table
        ref="multipleTableRef"
        :data="data"
        style="width: 100%"
        :header-cell-style="{color:'#2A62BC'}"
        border
        @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"  align="center"/>
    <el-table-column prop="id" label="序号" width="120"   align="center"/>
    <el-table-column label="图书名称" width="120"  align="center">
      <template #default="scope">{{ scope.row.bookName }}</template>
    </el-table-column>
    <el-table-column prop="author" label="作者" width="120"   align="center"/>
    <el-table-column prop="price" label="单价"  align="center"/>
    <el-table-column prop="publisher" label="出版社"  align="center"/>
    <el-table-column prop="date" label="出版日期"  align="center"/>
   
    <el-table-column label="操作"  align="center">
        <template #default="scope">
			<el-row class="right-btn">
			    <el-button color="#1c84c6" :icon="Edit" @click="open(scope.$index,scope.row)" >更新</el-button>
	            <el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.row)">删除</el-button>
			</el-row>
		</template>
    </el-table-column>
  </el-table>
</div>

<el-dialog v-model="dialogTableVisible" :title="editTitle" width="650">
    <el-form :model="form"  label-width="120px"  class="form-demo">
    <el-form-item label="图书名称">
      <el-input v-model="form.bookName" />
    </el-form-item>
    <el-form-item  label="作者">
      <el-input v-model="form.author" />
    </el-form-item>
    <el-form-item  label="价格">
      <el-input v-model="form.price" />
      <!-- <el-input-number
            v-model="form.price"
            controls-position="right"
        /> -->
    </el-form-item>
    <el-form-item  label="出版社">
      <el-input v-model="form.publisher" />
    </el-form-item>
    <el-form-item  label="出版时间">
      <el-date-picker
        v-model="form.date"
        type="date"
         format="YYYY-MM-DD"
         value-format="YYYY-MM-DD"
        style="width: 60%;"
      />
    </el-form-item>
  
    
  </el-form>
  <template #footer>
		<span class="dialog-footer">
			<el-button  @click="dialogTableVisible = false">关闭</el-button>
			<el-button color="#1c84c6" @click="saveEdit">{{ editTitle.substring(0,2) }}</el-button>
		</span>
	</template>
  </el-dialog>

</div>
</template>

<script setup>
import { ref ,reactive,toRefs} from 'vue'
import { Search,Delete,Edit } from '@element-plus/icons-vue'
import imgURL from '@/assets/img/dn.png'
import {getList,deleteOne,updateBook,addBook,deleteAll} from '@/api/index'
import { ElMessage } from 'element-plus';
const data = ref()
const getData= async ()=>{

  getList().then(res=>{
    console.log(res,'///////')
    data.value= res.data
  })
}
getData()


const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 1,
    bookName: '当你学会独处',
    author: '周国平',
    price:23,
    date: '2016-05-02',
    publisher:'人文出版社',
    url:imgURL,

  },
  {
    id: 2,
    bookName: '当你学会独处',
    author: '周国平',
    price:23,
    date: '2016-05-02',
    publisher:'人文出版社',
    url:'@/assets/img/dn.png',
  },
 
]
/*********更新和删除操作*********** */
const editTitle = ref('修改图书')
const  dialogTableVisible = ref(false)
const form = reactive({
    id:'',
    bookName: '',
    author: '',
    price:'',
    date: '',
    publisher:'',
    // url:''
})
const  open=(index,row)=>{
     if(row){
           console.log('1',row) 
           editTitle.value='修改图书'
           handleEdit(index,row)   
     }else{
        console.log('2',row) 
        editTitle.value='添加图书'
        form.bookName=''
        form.author=''
        form.price=''
        form.date=''
        form.publisher=''
        
     }
     dialogTableVisible.value = true
    console.log('111111111111111111')
}
let idx = -1;
const handleEdit = (index, row) => {
    idx=index
    form.id=row.id
   form.bookName=row.bookName
   form.author=row.author
   form.price=row.price
   form.date=row.date
   form.publisher=row.publisher
  //  dialogTableVisible.value=true
}

/*******更新和添加的操作********/
const  saveEdit=async ()=>{
  let res ;
    //完成跟新操作 to ......
    if(editTitle.value=="添加图书"){
      //添加图书的方法
     res =  await addBook(form)
    }else{
      //修改图书的方法
      res = await updateBook(form)
    }
    console.log(res,'update----add')
    getData()
    dialogTableVisible.value=false

}



/*********删除单本图书************* */
const  handleDelete= async (row)=>{
  console.log('delete', row.id)
  //to 删除
  // 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
  .then(() => {
	  console.log('delete',row.id)
		//to 传递id 到后台 
	let res =  deleteOne(row.id)
  console.log(res,'delete---res')
		// 删除成功后
		 getData()
     ElMessage.success(res.data)
	})
	.catch((err) => {
    ElMessage.error(err)
  });
}

/*******删除多个**** */
//删除多个数据  to......
const handleAllDelete = async ()=>{
	// console.log('删除多个')
	console.log(multipleSelection.value,'===拿到所有选择的数据====')
	if (multipleSelection.value.length==0) {
		ElMessage.error('请选择项')
		return
  	}
    	ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  }).then( async () => {
        console.log(multipleSelection.value.map(item=>item.id))
        //axios删除的操作
        let res = await deleteAll({ids:multipleSelection.value.map(item=>item.id)})	
        console.log("删除：",res)
        getData()
        ElMessage.success(res.data)
    }).catch(err=>{
        ElMessage.error(err)
    })
}

/*************查看日志***************/
/**flag日志组件的显示 */
const props = defineProps({
    flag:String
})
const {flag}  = toRefs(props)
console.log(flag,'=======')
const emit  = defineEmits(['update:flag'])
const  catLog = ()=>{
    emit('update:flag','2')
}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
}


.handle-input {
  float: right;
	width: 240px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}

.right-btn{
 	justify-content:center;
	.el-button{
		margin-right: 6px;
		padding: 1px 5px;
	}
}
.form-demo{
    .el-input{
        width: 60%;
    }
    .el-input-number{
        width: 60%;
    }
   
}

.handle-input .el-input-group__append button.el-button, .el-input-group__append button.el-button:hover {
    background-color: #1C84C6;
    color: #fff;
    font-weight: 700;
} 
</style>